流式布局
百分比布局,非固定宽度,内容向两边填充,流动的布局。
viewport(视口)
PC端的网页在手机端的浏览器显示是不会出现网页的,这是因为移动端的网页不是直接放在移动端的浏览器中,而是放在移动端的一个虚拟区域中,这个虚拟区域叫做viewport(视觉窗口,视口,视口的宽度一般默认比浏览器宽度大),然后视口进行相应的缩放,最后将视口放在浏览器中。
适配方案
因为viewport默认会进行缩放,所以网页在移动端显示的对用户不友好,所以我们需要进行一些配置来使网页在移动端显示得和pc端一样。
- 网页宽度必须和浏览器宽度保持一致
- 默认显示的缩放比例和pc端保持一致(缩放比例为1.0)
- 不允许用户缩放网页
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
</head>
viewport主要有6个功能属性
- width (特殊值: device-width,表示设备屏幕宽度) 设置宽度
- height 设置高度
- initial-scale(1:表示不进行缩放) 设置默认的初始化缩放比例
- user-scalable 设置用户是否可以进行缩放
- minmium-scale 设置最小缩放比例
- maxmium-scale 设置最大缩放比例
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。